<template>
  <Layout>
    <Header style="background:#fff;border-bottom:1px solid #ccc;">
      <h3>员工信息</h3>
    </Header>
    <Content style="background:#fff;padding:10px 20px;overflow:auto">
      <div class="item" style="margin-top:0px">
        <div class="item-title">
          <h3>接口描述</h3>
        </div>
        <div class="info">根据员工Id获取员工信息</div>
      </div>

      <div class="item">
        <div class="item-title">
          <h3>接口链接</h3>
        </div>
        <div class="info">http://hostname/employee/:id</div>
      </div>

      <div class="item">
        <div class="item-title">
          <h3>是否需要身份认证</h3>
        </div>
        <div class="info">是</div>
      </div>

      <div class="item">
        <div class="item-title">
          <h3>请求参数</h3>
        </div>
        <div class="info">
          <Table :columns="reqCol" :data="reqData"></Table>
        </div>
      </div>

      <div class="item">
        <div class="item-title">
          <h3>返回结果</h3>
        </div>
        <div class="info">
          <Table :columns="reqCol" :data="resData"></Table>
        </div>
      </div>

      <div class="item">
        <div class="item-title">
          <h3>返回示例</h3>
        </div>
        <div class="info">
          <pre style="background:#ddd;padding:20px 0;border-radius:4px">
              {
                  "id":2739,
                  "name":"张三",
                  "mobile":"15000000001",
                  "department":"财务部"
              }
          </pre>
        </div>
      </div>
    </Content>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      reqCol: [
        {
          title: "字段名",
          key: "title"
        },
        {
          title: "变量名",
          key: "keyName"
        },
        {
          title: "必填",
          key: "required"
        },
        {
          title: "类型",
          key: "type"
        },
        {
          title: "描述",
          key: "desc"
        }
      ],
      reqData: [
        {
          title: "Token",
          keyName: "token",
          required: "是",
          type: "String",
          desc: "身份认证所需token"
        },
        {
          title: "员工id",
          keyName: ":id",
          required: "是",
          type: "Number",
          desc: "员工id值，接口对应接口链接中的:id"
        }
      ],
      resData: [
        {
          title: "员工id",
          keyName: "id",
          required: "是",
          type: "Number",
          desc: "员工的唯一标识"
        },
        {
          title: "姓名",
          keyName: "name",
          required: "是",
          type: "String",
          desc: "员工姓名"
        },
        {
          title: "手机号",
          keyName: "mobile",
          required: "是",
          type: "String",
          desc: "员工的手机号，作为登录账号使用"
        },
        {
          title: "部门",
          keyName: "department",
          required: "是",
          type: "String",
          desc: "员工所属部门"
        }
      ]
    };
  }
};
</script>

<style scoped>
.info {
  margin: 10px 23px;
  font-size: 14px;
}

.item-title {
  border-left: 3px solid #44b549;
  padding-left: 20px;
}

.item {
  margin-top: 25px;
}
</style>


